<template>
    <div class="login">
        <!-- vue书写一个登录页面 -->
        <el-row>
            <el-col :xs="24" :sm="24" :md="24">
                <div class="form">
                    <!--                    <img class="bg2" src="../../assets/image/login/bg2.png" alt=""/>-->
                    <div
                        class="content rounded-xl animate__animated animate__fadeInDown animate__fast"
                    >
                        <div class="name">
                            <img :src="basic.logo" alt=""/>
                            <text>
                                {{ $t('common.appShortName') }}{{ $t('router.login') }}
                            </text>
                        </div>
                        <el-form size="default"
                                 ref="formRef"
                                 :model="loginParams"
                                 :rules="rules"
                                 label-position="top"
                                 hide-required-asterisk
                                 @submit.prevent="login"
                        >
                            <el-form-item prop="mobile"
                                          :label="$t('common.mobile')">
                                <el-input
                                    :placeholder="$t('common.pleaseEnter')+$t('common.mobile')"
                                    v-model="loginParams.mobile"
                                    autocomplete="off"
                                >
                                    <template #prefix>
                                        <el-dropdown>
                                            <span class="input-suffix">+{{ regionItem?.RegionCode }}</span>
                                            <template #dropdown>
                                                <el-dropdown-menu>
                                                    <el-dropdown-item
                                                        v-for="(item, index) in regionList"
                                                        :key="index"
                                                        :command="item.RegionCode">
                                                        {{ item.RegionName }}(+{{ item.RegionCode }})
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="verifyCode" :label="$t('common.verifyCode')">
                                <el-input
                                    class="input-password"
                                    :placeholder="$t('common.pleaseEnter')+$t('common.verifyCode')"
                                    v-model="loginParams.verifyCode"
                                    autocomplete="off"
                                    type="password"
                                >
                                    <template #suffix>
                                        <div
                                            class="input-suffix px-2"
                                            @click="onSendMsg"
                                            :class="{ 'text-blue-4': loginParams.mobile && countDown == 0}">
                                            {{
                                                countDown == 0 ? $t('common.getVerifyCode') : $t('common.afterSeconds', {second: countDown})
                                            }}
                                        </div>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="loginBtn" @click="login" type="primary">
                                    {{ $t('common.login') }}
                                </el-button>
                                <div class="text-center"></div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import {message} from "@/Hooks/Element-plus"
import {basic} from "@/config/setting"
import {useUserStore} from "@/stores/modules/user"
import {computed, nextTick, reactive} from "vue"
import {useRoute, useRouter} from "vue-router"

import {rule} from "@/utils/validate"
import {sendMsg} from "@/api/user"
import {getPhoneRegionList} from '@/api/utils'
import {useI18n} from "vue-i18n";
import {$t} from "../../utils/i18n";

const {t} = useI18n()

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const formRef = ref()
const loading = ref(false)
const loginParams = reactive({
    regionCode: 86,
    mobile: "",
    verifyCode: "",
})
const rules = reactive({
    mobile: [
        {
            required: true,
            message: t('rules.mobile'),
            trigger: "change",
            min: 10,
        },
    ],
    verifyCode: [
        {
            required: true,
            max: 4,
            min: 4,
            message: t('rules.verifyCode'),
            trigger: "change",
        },
    ],
})

const regionList = ref([])
const regionItem = computed(() => regionList.value.find((item: any) => item.RegionCode === loginParams.regionCode))
const initData = async () => {
    regionList.value = await getPhoneRegionList()
}
initData();
const onSendMsg = async () => {
    if (!loginParams.mobile || countDown.value > 0 || loading.value) {
        return
    }
    loading.value = true
    const res: any = await sendMsg(loginParams.regionCode, loginParams.mobile)
    if (res.success) {
        timeDown()
        message("success", t("common.codeSent"))
    }
    await nextTick(() => {
        loading.value = false
    })
}

const countDown = ref(0)
const timeDown = () => {
    countDown.value = 60
    const time = setInterval(() => {
        countDown.value--
        if (countDown.value === 0) {
            clearInterval(time)
        }
    }, 1000)
}

const login = async () => {
    formRef.value.validate(async (valid: boolean) => {
        if (!valid) {
            return
        }
        try {
            await userStore.loginUp(loginParams)
            await router.push({path: route.query.url as any})
        } catch (err: any) {
            message("error", err.message)
        }
    })
}
</script>

<style lang="scss">
::-webkit-scrollbar {
    display: none;
}

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgb(11 26 44 / 34%);
    background: url("@/assets/login_bg.jpeg") no-repeat center center;
    background-size: cover;

    .el-input .el-input__wrapper {
        height: 33px;
        padding: 1px 10px;
        background: rgb(255 255 255 / 70%);
        border-radius: 17px;

        //border: 1px solid #DCDFE6;
        --el-input-border-color: #dcdfe6;
    }

    .el-row {
        width: 100%;
        height: 100%;

        .el-col {
            width: 50%;

            .pic {
                position: relative;
                display: flex;
                width: 100%;
                height: 100%;

                .title {
                    position: absolute;
                    top: 160.0012px;
                    right: 180px;
                    display: flex;
                    flex-direction: column;
                    margin: auto;

                    text {
                        &:nth-child(1) {
                            font-size: 28.0013px;
                            font-weight: bold;
                        }

                        &:nth-child(2) {
                            margin-top: 10.0012px;
                            font-size: 12px;
                            color: gray;
                        }

                        &:nth-child(3) {
                            margin-top: 10.0012px;
                            font-size: 12px;
                            color: gray;
                        }
                    }
                }

                img {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                }
            }

            .form {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;

                .bg2 {
                    position: absolute;
                    top: 0;
                    width: 100%;
                }

                .el-form-item__label {
                    font-size: 17px;
                    font-weight: 500;
                    color: #000;
                }

                .content {
                    //box-shadow: 0px 0px 10.0012px 1.9988px rgba(0, 0, 0, 0.1);
                    // background: url("../../assets/image/login/bg.jpg") no-repeat;
                    background: rgba(255, 255, 255, 0.98);

                    width: 427px;
                    height: 546px;
                    padding: 54px 50px;
                    //background: linear-gradient(180deg, #fff0f0 0%, #fff 100%);
                    border-radius: 20px;

                    .name {
                        //height: 140px;
                        display: flex;
                        flex-flow: column;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        margin-bottom: 60px;
                        font-size: 30px;

                        img {
                            width: auto;
                            height: 67px;
                            //border-radius: 12px;
                        }

                        text {
                            padding-top: 15px;
                            font-size: 22px;
                            font-weight: 500;
                            color: #222;
                        }
                    }

                    .el-form {
                        //height: 50%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .el-form-item {
                            width: 100%;

                            .input-suffix {
                                //min-width: 90px;
                                @apply text-xs outline-none inline-block h-full flex items-center cursor-pointer;
                            }

                            .password {
                                display: flex;
                                justify-content: space-between;
                                width: 100%;

                                .el-checkbox__input.is-checked .el-checkbox__inner {
                                    background-color: orange;
                                    border: 0;
                                }

                                .el-checkbox__input.is-checked + .el-checkbox__label {
                                    color: #fff;
                                }

                                .forgetPassword {
                                    color: gray;
                                    cursor: pointer;
                                }
                            }

                            .loginBtn {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 100%;
                                //height: 33px;
                                margin-top: 15px;
                                //font-size: 12px;
                                //color: #fff;
                                cursor: pointer;
                                //background: linear-gradient(270deg, #ffc474 0%, #02ACF7 100%);
                                border: 0;
                                border-radius: 17px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
